<div class="max-w-full w-full flex flex-col px-8 py-4">

  <div class="flex flex-wrap justify-between items-center">
    <div class="text-xl my-4">
      {{ 'PAC.MENU.HOME.Trending' | translate: {Default: "Trending"} }}
    </div>
    <div class="flex flex-wrap justify-end items-center gap-2" displayDensity="cosy">
      <div>
        {{ 'PAC.KEY_WORDS.SortBy' | translate: {Default: 'Sort By'} }}:
      </div>
      <mat-button-toggle-group [(ngModel)]="orderType" ngmAppearance="outline" color="accent" >
        <mat-button-toggle value="visits">
          {{ 'PAC.KEY_WORDS.Visits' | translate: {Default: 'Visits'} }}
        </mat-button-toggle>
        <mat-button-toggle value="update">
          {{ 'PAC.KEY_WORDS.UpdatedDate' | translate: {Default: 'Updated Date'} }}
        </mat-button-toggle>
      </mat-button-toggle-group>
      <ngm-search [formControl]="searchControl"></ngm-search>
    </div>
  </div>

  <div class="max-w-full w-full grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
    waIntersectionObserver
    waIntersectionThreshold="0.5"
    [@listAnimation]="trends.length">
    <pac-story-card *ngFor="let story of trends; trackBy: trackById" [story]="story" [highlight]="highlight" />

    <div *ngIf="!done" class="col-span-3 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
      (waIntersectionObservee)="onIntersection()">
      <div *ngFor="let item of [1,2,3]" class="border shadow rounded-md p-4 w-full mx-auto dark:border-slate-200/10">
        <div class="animate-pulse flex space-x-4">
          <div class="bg-slate-200 h-24 w-20 dark:bg-slate-200/10"></div>
          <div class="flex-1 space-y-6 py-1">
            <div class="h-2 bg-slate-200 rounded dark:bg-slate-200/10"></div>
            <div class="space-y-3">
              <div class="grid grid-cols-3 gap-4">
                <div class="h-2 bg-slate-200 rounded col-span-2 dark:bg-slate-200/10"></div>
                <div class="h-2 bg-slate-200 rounded col-span-1 dark:bg-slate-200/10"></div>
              </div>
              <div class="h-2 bg-slate-200 rounded dark:bg-slate-200/10"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>